<!DOCTYPE html>
<html lang="ZH-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>后台注册</title>
  <link rel="stylesheet" href="__ADMIN_PUBLIC__/layui/css/layui.css">
  <link rel="stylesheet" href="__ADMIN_PUBLIC__/style/login.css">
</head>

<body>
  <div class="kit-login">
    <div class="kit-login-bg"></div>
    <div class="kit-login-wapper">
      <h2 class="kit-login-slogan">欢迎使用 <br> KITADMIN 后台模板后台模板</h2>
      <div class="kit-login-form">
        <h4 class="kit-login-title">注册</h4>
        <form class="layui-form">
          <div class="kit-login-row">
            <div class="kit-login-col">
              <i class="layui-icon">&#xe612;</i>
              <span class="kit-login-input">
                <input type="text" name="mobile" id="LAY-user-login-cellphone" lay-verify="" placeholder="手机号" maxlength="11"/>
              </span>
            </div>
            <div class="kit-login-col"></div>
          </div>
          <div class="kit-login-row">
            <div class="kit-login-col">
              <i class="layui-icon">&#xe673;</i>
              <span class="kit-login-input">
                <input type="password" name="password" lay-verify="" placeholder="密码"/>
              </span>
            </div>
            <div class="kit-login-col"></div>
          </div>
          <div class="kit-login-row">
            <div class="kit-login-col">
              <i class="layui-icon">&#xe672;</i>
              <span class="kit-login-input" style="width: 135px">
                <input type="text" name="code" id="LAY-user-login-vercode" lay-verify="" placeholder="验证码" />
              </span>
              <button type="button" class="layui-btn layui-btn-primary" id="LAY-user-getsmscode" style="height: 28px;line-height: 26px;">获取验证码</button>
            </div>
            <div class="kit-login-col"></div>
          </div>
          <div class="kit-login-row">
            <button class="layui-btn kit-login-btn" lay-submit="submit" lay-filter="LAY-user-login-submit">注册</button>
          </div>
          <div class="kit-login-row" style="margin-bottom:0;line-height: 20px;">
            <!--<a href="javascript:;" style="color: rgb(153, 153, 153); text-decoration: none; font-size: 13px;width: 100px;float: left;" id="forgot">忘记密码</a>-->
            <!--<a href="javascript:;" style="color: rgb(153, 153, 153); text-decoration: none; font-size: 13px;width: 80px;float: right;" id="regs">注册</a>-->
          </div>
        </form>
      </div>
    </div>
  </div>
  <script src="__ADMIN_PUBLIC__/layui/layui.js"></script>
  <script>
      layui.config({
          base: '__ADMIN_PUBLIC__/' //静态资源所在路径
      }).extend({
          index: 'lib/index' //主入口模块
      }).use(['index','form'], function(){
          var $ = layui.$
            ,setter = layui.setter
            ,admin = layui.admin
            ,form = layui.form
            ,router = layui.router()
            ,search = router.search;

          $('#LAY-user-getsmscode').on('click',function (obj) {
              var mobile = $("input[name='mobile']").val();
              $.ajax({
                  url: "/login/sendSms"
                  ,type: 'get'
                  ,dataType: 'json'
                  ,data: {mobile:mobile}
                  ,success:function (response) {
                      if(response.code == 200){
                          // $('#LAY-user-getsmscode').html();
                          layer.msg(response.msg);
                          var timer,
                              seconds = response.data.expire,
                              countDown = function (loop) {
                                  seconds--;
                                  if(seconds < 0){
                                      $('#LAY-user-getsmscode').html('获取验证码');
                                      $('#LAY-user-getsmscode').removeAttr('disabled');
                                      clearInterval(timer);
                                  } else {
                                      $('#LAY-user-getsmscode').html(seconds + '秒后重获');
                                      $('#LAY-user-getsmscode').attr('disabled','true');
                                  }
                              };
                          timer = setInterval(function () {
                              countDown(true);
                          },1000);
                          return false;
                      }else{
                          layer.msg(response.msg,{icon:5,anim: 6});
                          return false;
                      }

                  }
              });
              return false;

          });

          //提交
          form.on('submit(LAY-user-login-submit)', function(obj){
              var mobile = $("input[name='mobile']").val();
              var password = $("input[name='password']").val();
              var smsCode = $("input[name='code']").val();
              $.ajax({
                  url: "/login/register"
                  ,type: 'post'
                  ,dataType: 'json'
                  ,data: {mobile:mobile,password:password,sms_code:smsCode}
                  ,success:function (response) {
                      if(response.code == 200){
                          layer.msg(response.msg,{icon:6,time:2000},function () {
                              window.location = "{:url('/login')}";
                          });
                      }else{
                          layer.msg(response.msg,{icon:5,anim: 6});
                      }
                      return false;
                  }
                });
              return false;
          });


          //实际使用时记得删除该代码
          // layer.msg('为了方便演示，用户名密码可随意输入', {
          //     offset: '15px'
          //     ,icon: 1
          // });

      });
  </script>
</body>
</html>